import  {PureComponent} from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Card, Row, Col } from 'antd';
import React from 'react';
import "antd/dist/antd.css";
import {RightCircleOutlined} from "@ant-design/icons";
import {history} from "@@/core/history";
import {queryChartData, queryUserChartData} from "@/pages/service";
import {queryCurrent} from "@/pages/UserCenter/service";
import * as echarts from 'echarts';

const getDay = (day: number) => {
  let today = new Date();
  let targetday_milliseconds=today.getTime() + 1000*60*60*24*day;
  today.setTime(targetday_milliseconds);
  let tYear = today.getFullYear();
  let tMonth: string | number = today.getMonth();
  let tDate: string | number = today.getDate();
  tMonth = doHandleMonth(tMonth + 1);
  tDate = doHandleMonth(tDate);
  return tYear+"-"+tMonth+"-"+tDate;

}

const doHandleMonth = (month: string | number) => {
  let m = month;
  if(month.toString().length == 1){
    m = "0" + month;
  }
  return m;
}

class Welcome extends PureComponent{
  state={
    modelVisible:false,
    hero:[],
    data: [],
    value: undefined,
    flag: true,
    userFlag: true
  }

  componentDidMount() {
    queryCurrent().then(user => {
      queryUserChartData({id: user.data.id}).then(res => {
        let years = [], fans: number[] = [], views: number[] = [];
        let fan = res.data.fans, view = res.data.views;
        if (res.status === 200 && (fan.length > 0 || view.length > 0)){
          for(let i = -7; i < 0; i++){
            let day = getDay(i);
            years.push(day);
            if (fan.length > 0 && fan.filter((m: { date: string; }) => m.date == day).length > 0){
              fan.map((item: { date: string; count: number; }) => {
                if (item.date == day){
                  fans.push(item.count);
                }
              })
            }else {
              fans.push(0);
            }
            if (view.length > 0 && view.filter((m: { date: string; }) => m.date == day).length > 0){
              view.map((item: { date: string; count: number; }) => {
                if (item.date == day){
                  views.push(item.count);
                }
              })
            }else {
              views.push(0);
            }
          }
          let option = {
            animationDuration: 5000,
            title: {
              text: ''
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['粉丝量', '主页访客量']
            },
            emphasis: {
              focus: 'series'
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: years
            },
            yAxis: {
              type: 'value'
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            series: [
              {
                name: '粉丝量',
                type: 'line',
                stack: 'likes',
                showSymbol: false,
                itemStyle : {
                  normal : {
                    color:'orangered',
                    lineStyle:{
                      color:'orangered'
                    }
                  }
                },
                data: fans
              },
              {
                name: '主页访客量',
                type: 'line',
                stack: 'views',
                showSymbol: false,
                itemStyle : {
                  normal : {
                    color:'lightblue',
                    lineStyle:{
                      color:'lightblue'
                    }
                  }
                },
                data: views
              }
            ]
          };
          let dom = document.getElementById('userChart');
          let chart = echarts.init(dom as HTMLElement);
          chart.setOption(option);
        }else {
          this.setState({userFlag: false});
        }
      })
      queryChartData({userId: user.data.id}).then(res => {
        if (res.status === 200 && res.data.count){
          let years = [], likes: number[] = [], stars: number[] = [], messages: number[] = [], views: number[] = [];
          let like = res.data.likes, star = res.data.stars, message = res.data.messages, view = res.data.views;
          for(let i = -7; i < 0; i++){
            let day = getDay(i);
            years.push(day);
            if (like.length > 0 && like.filter((m: { date: string; }) => m.date == day).length > 0){
              like.map((item: { date: string; count: number; }) => {
                if (item.date == day){
                  likes.push(item.count);
                }
              })
            }else {
              likes.push(0);
            }
            if (message.length > 0 && message.filter((m: { date: string; }) => m.date == day).length > 0){
              message.map((item: { date: string; count: number; }) => {
                if (item.date == day){
                  messages.push(item.count);
                }
              })
            }else {
              messages.push(0);
            }
            if (star.length > 0 && star.filter((m: { date: string; }) => m.date == day).length > 0){
              star.map((item: { date: string; count: number; }) => {
                if (item.date == day){
                  stars.push(item.count);
                }
              })
            }else {
              stars.push(0);
            }
            if (view.length > 0 && view.filter((m: { date: string; }) => m.date == day).length > 0){
              view.map((item: { date: string; count: number; }) => {
                if (item.date == day){
                  views.push(item.count);
                }
              })
            }else {
              views.push(0);
            }
          }
          let option = {
            animationDuration: 5000,
            title: {
              text: ''
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['点赞数', '收藏数', '评论数', '浏览量']
            },
            emphasis: {
              focus: 'series'
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: years
            },
            yAxis: {
              type: 'value'
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            series: [
              {
                name: '点赞数',
                type: 'line',
                stack: 'likes',
                showSymbol: false,
                itemStyle : {
                  normal : {
                    color:'orangered',
                    lineStyle:{
                      color:'orangered'
                    }
                  }
                },
                data: likes
              },
              {
                name: '收藏数',
                type: 'line',
                stack: 'stars',
                showSymbol: false,
                itemStyle : {
                  normal : {
                    color:'#389FFF',
                    lineStyle:{
                      color:'#389FFF'
                    }
                  }
                },
                data: stars
              },
              {
                name: '评论数',
                type: 'line',
                stack: 'messages',
                showSymbol: false,
                itemStyle : {
                  normal : {
                    color:'yellowgreen',
                    lineStyle:{
                      color:'yellowgreen'
                    }
                  }
                },
                data: messages
              },
              {
                name: '浏览量',
                type: 'line',
                stack: 'views',
                showSymbol: false,
                itemStyle : {
                  normal : {
                    color:'lightblue',
                    lineStyle:{
                      color:'lightblue'
                    }
                  }
                },
                data: views
              }
            ]
          };
          let dom = document.getElementById('welcomeChart');
          let chart = echarts.init(dom as HTMLElement);
          chart.setOption(option);
        }else {
          this.setState({flag: false});
        }
      })
    })
  }

  toBlogEdit = () => {
    history.push('/blogEdit')
  }

  toUserCenter = () => {
    history.push('/userCenter')
  }

  toUserSet = () => {
    history.push('/userSet')
  }

  render() {
    const { flag, userFlag } =  this.state;

    return (
      <PageContainer>
        <Card bordered={false}>
          <Row>
            <Col span={24}>
              <h1>Welcome to JokerPan’s Home !</h1>
            </Col>
          </Row>
        </Card>
        <Card title='七天数据趋势' bordered={false}>
          <Row style={{ marginTop: '2%' }}>
            <Col span={userFlag ? 24 : 7}>
              {userFlag &&
              <Card hoverable={true} title={<span style={{ fontWeight: 550 }}>个人中心</span>} extra={<a onClick={this.toUserCenter}>前往&nbsp;<RightCircleOutlined/></a>}>
                <div id='userChart' style={{ width: '100%', height: '500px' }}></div>
              </Card>}
              {!userFlag &&
              <Card hoverable={true} title={<span style={{ fontWeight: 550 }}>个人中心</span>} extra={<a onClick={this.toUserSet}>前往&nbsp;<RightCircleOutlined/></a>}>
                <Row>
                  <Col span={24}>
                    <h4>还没有数据哦，快去完善个人资料吧！(^_−)☆</h4>
                  </Col>
                </Row>
              </Card>}
            </Col>
            <Col span={flag ? 24 : 7} style={(flag || userFlag) ? { marginTop: '2%' } : { marginLeft: '2%' }}>
              {flag &&
              <Card hoverable={true} title={<span style={{ fontWeight: 550 }}>我的博客</span>} extra={<a onClick={this.toBlogEdit}>新增博客&nbsp;<RightCircleOutlined/></a>}>
                <div id='welcomeChart' style={{ width: '100%', height: '500px' }}></div>
              </Card>}
              {!flag &&
              <Card hoverable={true} title={<span style={{ fontWeight: 550 }}>我的博客</span>} extra={<a onClick={this.toBlogEdit}>新增博客&nbsp;<RightCircleOutlined/></a>}>
                <Row>
                  <Col span={24}>
                    <h4>还没有博客哦，快去新增一条吧！(*^▽^*)</h4>
                  </Col>
                </Row>
              </Card>}
            </Col>
          </Row>
        </Card>
      </PageContainer>
    )
  }
};
export default Welcome;
